﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Working with Objects</title>
    <script src="assets/scripts/objects.js" defer></script>
    <link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>

<section id="user-input" class="card">
    <div class="control">
        <label for="title">Favorite Movie</label>
        <input type="text" id="title" placeholder="Movie Title">
    </div>
    <div class="inline-controls">
        <div class="control">
            <label for="extra-name">Extra Information (Name)</label>
            <input id="extra-name" type="text">
        </div>
        <div class="control">
            <label for="extra-value">Extra Information (Value)</label>
            <input id="extra-value" type="text">
        </div>
    </div>
    <button id="add-movie-btn">Add Movie</button>
</section>

<section id="filter" class="card">
    <label for="filter-title">Filter by Title</label>
    <input type="text" id="filter-title" placeholder="Filter by Title">
    <button id="search-btn">Search</button>
</section>
<ul id="movie-list" class="card"></ul>
</body>
</html>